<template>
	<view class="custom-tabs">
		<!-- :class="{类名:是否生效}" -->
		<view v-for="(item, index) in list" class="custom-tabs-bar" :class="{ active: active === index }" @tap="changeFunc(index)">
			<!-- emit 对应的逻辑非常简单 可以在行内 用 $emit 直接触发  -->
			<!-- <view v-for="(item, index) in list" class="custom-tabs-bar" :class="{ active: active === index }" @tap="$emit('change', index)"> -->
			<text class="tabbar-text">{{ item }}</text>
		</view>

		<!-- 横条 -->
		<view :style="{ width: width + 'px', left: left + 'px' }" class="custom-tabs-cursor"></view>
	</view>
</template>

<script setup lang="ts">
import { nextTick, onMounted, ref } from 'vue';

const props = defineProps<{ list: string[]; active: number }>();

// 1.子-父 定义 emit 及触发
const emit = defineEmits<{ (e: 'change', index: number) }>();
const changeFunc = (index) => {
	// console.log(index);
	emit('change', index);
	//写法1: 更新  位置的状态变量--直接获取点击的元素的索引值   没有任何问题
	// const _left = tabInfos[index].left;
	// const _width = tabInfos[index].width - 15;
	// width.value = _width;
	// left.value = _left;

	//写法2: 更新  位置的状态变量--props  来获取传入的索引值
	//emit :子->父 父组件接收到数据更新以后传递给子组件的数据并不是同步的
	//解决方法: 1. 使用setTimeout()  不设置延迟事件就可以
	//         2. 使用next.tick包裹逻辑 也可以解决
	// 使用next.tick的优先级高于settimeout()

	//解决方法1
	// setTimeout(() => {
	// 	const _left = tabInfos[index].left;
	// 	const _width = tabInfos[index].width - 15;
	// 	width.value = _width;
	// 	left.value = _left;
	// });

	//解决方法2
	nextTick(() => {
		const _left = tabInfos[index].left;
		const _width = tabInfos[index].width - 15;
		width.value = _width;
		left.value = _left;
	});
};

// 1.线的高亮切换，位置，宽度
// 2.获取 列表项的每一项的 位置信息.并保存
// 3.索引切换时，获取最新的索引，根据索引获取 位置信息，并设置给 状态变量
const width = ref(20);
const left = ref(20);

let tabInfos = [] as UniApp.NodeInfo[];
onMounted(() => {
	const query = uni.createSelectorQuery();

	query.selectAll('.custom-tabs-bar').boundingClientRect((rects: UniApp.NodeInfo[]) => {
		console.log(rects);
		tabInfos = rects;
	});

	query.exec();
});
</script>

<!-- scss css 的超集 -->
<style lang="scss">
// 自定义tabbar
.custom-tabs {
	display: flex;
	position: relative;
	padding: 0 30rpx;
}

.custom-tabs-bar {
	height: 80rpx;
	line-height: 80rpx;
	color: #979797;
	padding-right: 30rpx;
	position: relative;

	// 解析完毕之后 会变为
	// .custom-tabs-bar.active
	// custom-tabs-bar类，同时还需要有 active 这个类
	&.active {
		color: #121826;
		font-weight: 500;
	}
}

.tabbar-text {
	font-size: 30rpx;
}
.custom-tabs-cursor {
	position: absolute;
	bottom: 3px;
	left: 20px;

	width: 20px;
	height: 2px;
	border-radius: 2px;
	background-color: #2cb5a5;
	transition: all 0.3s ease-out;
}
</style>
